<template>
    <div>
        <div class="cinemas_list_wrapper" v-for="item in cinemas.list" :key="item.id">
            <div class="cinemas_info">
                <div class="cinema_title"><span class="cinema_nm">{{item.nm}}</span><span class="cinema_price">{{item.sellPrice}}<span>元起</span></span></div>
                <span class="cinema_addrs">{{item.addr}}</span>
                <div class="cinema_tag_wrpper">
                    <span v-if="item.allowRefund">退</span>
                    <template v-if="item.hallType">
                        <span v-for="items in item.hallType" :key="items">{{items}}</span>
                    </template>
                    <span v-if="item.snack">小吃</span>
                </div>
            </div>
            <span class="cinema_dist">{{item.distance}}</span>
        </div>
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:['cinemas']
}
</script>
<style scoped>
.cinemas_list_wrapper{
    padding: 10px 12px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #666;
}
.cinemas_info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}
.cinema_title{
    margin-bottom: 6px;
}
.cinema_nm{
    font-size: 15px;
    color: #333;
}
.cinema_price{
    font-size: 15px;
    color: #e54847;
}
.cinema_price span:last-child{
    font-size: 12px;
    color: #999;
}
.cinema_addrs{
    font-size: 12px;
    margin-bottom: 3px;
}
.cinema_tag_wrpper{
    display: flex;
    flex-direction: row;
    margin-top: 3px;
}
.cinema_tag_wrpper span{
    font-size: 12px;
    padding: 1px 3px;
    margin-right: 3px;
    color: #17A8C2;
    border: 1px solid #17A8C2;
}
.cinema_tag_wrpper span:last-child{
    color: #FFB501;
    border:  1px solid #FFB501;
}

.cinema_dist{
    flex-shrink: 0;
    padding: 0 8px;
    font-size: 13px;
    color: #999;
}
</style>